#include('/header.html', {title : '资料管理'})
<body class="es-main-default es-nav-default ">

<div class="es-wrap">
  <div id="content-container" class="container">
    #include('header.html')
    <div class="row">
      <div class="col-md-3">
        <div class="sidenav locked js-sidenav" data-course-length="1">
          #include('sideMenu.html', {files : 'active'})
        </div>
      </div>
      <div class="col-md-9">
        <div class="panel panel-default panel-col">
          <div class="panel-heading">
            文件管理
          </div>
          <div class="panel-body " id="quiz-table-container">
            <table class="table table-striped table-hover" id="quiz-table">
              <thead>
              <tr>
                <th>序号</th>
                <th width="27%">名称</th>
                <th>所属任务</th>
                <th>文件类型</th>
                <th>状态</th>
                <th>创建时间</th>
                <th width="75">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr is="files-tr" v-for="(file, index) in materials"
                  :file="file" :index="index" :key="file.id"></tr>
              <tr class="text-center" v-if="materials.length<=0">
                <td colspan="7" class="empty">暂无任何文件</td>
              </tr>
              </tbody>
            </table>
            <div v-if="page.totalPages > 1" class="text-center">
              <navigation :pages="page.totalPages" :current.sync="page.pageNum" @navpage="gotoPage"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<template id="files-tr">
  <tr>
    <th>{{index+1}}</th>
    <td>{{file.filename}}</td>
    <td>{{file.task?file.task.name:'本课程'}}</td>
    <td>{{file.type=='0'?'课外资料':'任务课件'}}</td>
    <td v-html="getStatus()"></td>
    <td>{{file.time.substr(0,16)}}</td>
    <td>
      <button @click="delete_" class="btn btn-danger btn-xs">删除</button>
    </td>
  </tr>
</template>
<script>
  var materVm = new Vue({
    el: '#quiz-table-container',
    data: {
      kid: ${kid},
      materials: [],
      page: {
        pageNum: 1,
        totalPages: 1,
        limit: 10
      }
    },
    watch: {
      'page.pageNum': function (nv) {
        this.getPage();
      }
    },
    methods: {
      gotoPage: function(page) {
        this.page.pageNum = page;
      },
      getPage: function () {
        var self = this;
        $.post('/course/material/api/'+this.kid+'/page', {page: this.page.pageNum, join: false,type:1}, function (data) {
          if (data.success) {
            self.materials = [];
            self.materials = data.payload.rows;
            self.page.pageNum = data.payload.pageNum;
            self.page.totalPages = data.payload.totalPages;
          }
        });
      }
    },
    components: {
      'files-tr': {
        props: ['file', 'index'],
        template: '#files-tr',
        methods: {
          getStatus: function() {
            if (this.file.isUse) {
              return '<span class="label label-warning">使用中</span>'
            }
            return '<span class="label label-info">空闲中</span>'
          },
          delete_: function() {
            var self = this;
            layer.confirm('删除后将无法找回, 确定删除?', {
              icon: 3
            }, function (index) {
              var kid = self.file.courseId;
              var id  = self.file.id;
              $.post('/course/set/material/api/' + kid + '/delete/' + id, function (data) {
                if (data.success) {
                  materVm.materials.splice(self.index, 1);
                  layer.close(index);
                  layer.msg('删除成功！', {
                    offset: 't', icon: 6, time: 1000
                  });
                  if (materVm.materials.length <= 0) self.$root.page.pageNum--;
                  self.$root.getPage();
                } else {
                  layer.msg(data.msg, {
                    icon: 5,
                    time: 1500
                  });
                }
              });
            });
          }
        }
      }
    },
    mounted: function () {
      this.getPage();
    }
  })
</script>
#include('/footer.html')